<template>
    <div class="mainDiv">
        <el-row :gutter="20" class="rowHead">
            <el-col :span="12" class="mt mb">
                <el-button type="success" icon="plus" v-qx="quanxian.addbm" @click="addbranch">添加部门</el-button>
                <el-button icon="h-shuaxin1" type="primary" @click="reupdate" class="fr ml">刷新列表</el-button>
            </el-col>
            <el-col :span="12" class="mt mb">
                <el-input class="fr w300" placeholder="搜索部门名称" v-model="search" @keyup.enter.native="reupdate"></el-input>
            </el-col>
        </el-row>
        <el-table height="100%" :data="tableData" :row-class-name="tableRowClassName" :row-key="getRowKeys" :expand-row-keys="expands" @expand-change="unfold" :stripe="true">
            <!-- 二级列表开始 -->
            <el-table-column type="expand">
                <template slot-scope="scope">
                    <el-table :data="scope.row.childlist" class="demo-table-expand" :stripe="true">
                        <el-table-column label="#" type="index"></el-table-column>
                        <el-table-column label="小组名称" prop="name"></el-table-column>
                        <el-table-column label="小组状态" prop="isdisable">
                            <template slot-scope="scope">
                                <orderTags :typeValue="scope.row.isdisable" typeName="normalStatus"></orderTags>
                            </template>
                        </el-table-column>
                        <el-table-column label="小组操作" prop="isdisable">
                            <template slot-scope="scope">
                                <el-button size="mini" type="success" @click="open2(scope.row.id,0)" v-if="scope.row.isdisable" v-qx="quanxian.unstopxz">启用</el-button>
                                <el-button-group v-else>
                                    <el-button size="mini" type="warning" @click="open1(scope.row)" v-qx="quanxian.editxz">编辑</el-button>
                                    <el-button size="mini" type="danger" @click="open2(scope.row.id,1)" v-qx="quanxian.unstopxz">禁用</el-button>
                                </el-button-group>
                            </template>
                        </el-table-column>
                    </el-table>
                </template>
            </el-table-column>
            <!-- 一级列表内容部分开始 -->
            <el-table-column label="#" type="index"></el-table-column>
            <el-table-column label="部门名称" prop="name"></el-table-column>
            <el-table-column label="部门状态" prop="isdisable">
                <template slot-scope="scope">
                    <orderTags :typeValue="scope.row.isdisable" typeName="normalStatus"></orderTags>
                </template>
            </el-table-column>
            <el-table-column label="部门操作" prop="isdisable">
                <template slot-scope="scope">
                    <el-tooltip content="启用当前部门" placement="left" :open-delay="800" v-if="scope.row.isdisable" v-qx="quanxian.unstopbm">
                        <el-button size="mini" type="success" @click="open2(scope.row.id,0)" icon="h-qiyong2">启用</el-button>
                    </el-tooltip>
                    <el-button-group v-else>
                        <el-button size="mini" type="warning" @click="open1(scope.row)" icon="edit" v-qx="quanxian.editbm">编辑</el-button>
                        <el-button size="mini" type="danger" @click="open2(scope.row.id,1)" icon="h-jinyong" v-qx="quanxian.unstopbm">禁用</el-button>
                    </el-button-group>
                </template>
            </el-table-column>
            <el-table-column label="添加小组" prop="id">
                <template slot-scope="scope">
                    <el-tooltip content="在当前部门添加小组" placement="left" :open-delay="800" v-qx="quanxian.addxz">
                        <el-button size="mini" type="primary" @click="addlist(scope.row)" icon="h-bumen">添加小组</el-button>
                    </el-tooltip>
                </template>
            </el-table-column>
        </el-table>
    </div>
</template>
<script>
import C from '@/common/common.js'
import orderTags from '@/components/orderTags.vue'
export default {
  name: 'bumenList',
  data () {
    return {
      tableData: [],
      dianzhang: '',
      search: '',
      // 要展开的行，数值的元素是row的key值
      expands: [],
      quanxian: {
        addbm: 'department_addbm',
        addxz: 'department_addxz',
        unstopbm: 'department_unstopbm',
        unstopxz: 'department_unstopxz',
        editbm: 'department_editbm',
        editxz: 'department_editxz'
      }
    }
  },
  methods: {
    // 重命名
    async open1 (row) {
      C.prompt('编辑部门名称', async (value) => {
        let data = await C.ajax('/shop/department/editdepartment', { id: row.id, name: value }, 'post')
        C.success(data.data.info)
        this.reupdate()
      })
    },
    // 停用与启用
    async open2 (id, status) {
      let tishi = ''
      if (status) {
        tishi = '此操作将停用该部门, 是否继续?'
      } else {
        tishi = '此操作将重新启用该部门, 是否继续?'
      }
      C.confirm(tishi, async () => {
        let data = await C.ajax('/shop/department/departmentchange', { id: id, isdisable: status }, 'post')
        if (data) {
          C.success(data.data.info)
          this.reupdate()
        }
      })
    },

    // 增加小组
    async addlist (row) {
      if (row.isdisable === 0) {
        C.prompt('请输入新建小组名称', async value => {
          let datas = {
            name: value,
            pid: row.id
          }
          await C.ajax('/shop/department/addgroup', datas, 'post')
          this.reupdate()
          C.success('操作成功')
        })
      } else {
        C.error('请重启该部门，再执行该操作！')
      }
    },

    // 增加部门
    async addbranch (value) {
      C.prompt('请输入新建部门名称', async value => {
        await C.ajax('/shop/department/adddepartment', { name: value }, 'post')
        this.reupdate()
        C.success('操作成功')
      })
    },

    // 请求数据
    async reupdate () {
      let data = await C.ajax('/shop/department/departmentlist', { search: this.search }, 'post')

      data.blist.forEach((b) => {
        b.childlist = []
        data.xlist.forEach((x) => {
          if (b.id === x.pid) {
            b.childlist.push(x)
          }
        })
      })
      this.tableData = data.blist
      this.expands = JSON.parse(JSON.stringify(this.expands))
    },

    tableRowClassName: function (obj) {
      if (obj.row.childlist.length <= 0) {
        return 'xiaoshi'
      }
      return ''
    },

    // 获取row的key值
    getRowKeys: function (row) {
      return row.id
    },

    unfold: function (row, expanded) {
      this.expands = expanded.map(row => {
        return row.id
      })
    }
  },
  mounted: function () {
    this.reupdate()
  },
  components: { orderTags }
}
</script>
<style>
</style>